<!DOCTYPE html>
<html lang="en">

<head>
    <script src="/js/jquery-1.11.3.min.js"></script>
    <script src="/js/Vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/frontstage.css">
    <link rel="stylesheet" href="/css/player.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1320167_tr6up9ah8d.css">
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
    <div id="mvplay">
        <div class="topbar">
            <h1 class="theme">
                <img  class="logo" src="/imgs/logo.png">
            </h1>
            <ul class="theme">
                <li class="menu">
                    <a href="/">发现音乐</a>
                </li>
                <li class="menu">
                    <a :href="'/userInfo?id='+ userData.id" v-if="userData != null">我的音乐</a>
                    <a v-else @click="loginshow = true">我的音乐</a>
                </li>
            </ul>
            
            <div class="login fr" >
                <el-dropdown v-if="userData == null">
                    <img class="user-avatar" src="/imgs/头像.png">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" @click="loginshow=true">登录</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="registershow=true">注册</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown v-else>
                    <img class="user-avatar" :src="userData.picture.resourcePath">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" :href="'/userInfo?id='+ userData.id">个人主页</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="exit">退出</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        
            <div class="search fr">	
                <div class="left_park_side"></div>
                <div class="right_park_side"></div>
                <form action="#" target="#">
                    <div class="searchbody">
                        <input type="text" name="keyword"  placeholder="张敬轩"/>
                    </div>
                    <button type="submit">
                        <i class="el-icon-search"></i>
                    </button>
                </form>
            </div>
        </div>
        <div class="mvplay-video">
            <div class="mvplay-title">
                <span class="linhicon icon-MV"></span>
                <h2>{{mvData.name}}</h2>
            </div>
            
            <div class="player">
                <video id="myVideo" :src="mvData.resourcePath"></video>
                <div class="play-mask">
                    <a href="javascript:;" class="switch-mask linhicon icon-bofang"></a>
                </div>
                <div class="controls">
                    <!-- 播放/暂停 -->
                    <a href="javascript:;" class="switch linhicon icon-bofang"></a>
                    <!-- 下载 -->
                    <a class="xiazai  linhicon icon-xiazai" :href="mvData.resourcePath" :download="mvData.name+'.mp4'"></a>
                    <!-- 全屏 -->
                    <a href="javascript:;" class="expand linhicon icon-quanping"></a>
                    <!-- 进度条 -->
                    <div class="progress">
                        <div class="loaded">
                            <img class="load-dot" src="/imgs/dot.png">
                        </div>
                        <div class="line"></div>
                        <div class="bar"></div>
                    </div>
                    <!-- 时间 -->
                    <div class="timer">
                        <span class="current">00:00:00</span> /
                        <span class="total">00:00:00</span>
                    </div>
                    <!-- 声音 -->
                </div>
            </div>
        </div>
        <my-footer></my-footer>
    </div>
<script src="/js/video.js" ></script>
<script type="module"  th:inline="javascript">
var mv = [[${mv}]]
var user = [[${user}]]
console.log(mv);
var mvplay = new Vue({
    el: '#mvplay',
    data() {
        return {
            mvData: mv
        };
    },
    methods: {
        exit(){
            $.ajax({
                url: "/logout",
                type: "post",
                contentType: "application/json",
                async: false,
                success(data) {
                    window.location.href = "/";
                }
            });
        }
    },
    components: { 
        'my-footer': httpVueLoader('./vue/footer.vue')
    }
})
</script>
</body>

</html>